<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幻游网-全部游戏</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/game.css">
</head>
<body>
    <div class="container-fluid  p-0">
        <header class="top-area animal-top">
            <div class="top-nav container ">
                <nav class="navbar navbar-expand-lg  navStyle navbar-dark animal-left">
                    <!-- 商标 -->
                    <div class="navbar-brand">
                        <a href="#" class="logo-text">HuanYou</a>
                    </div>
    
                    <!-- 汉堡按钮 -->
                    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#toggle">
                        <span class="navbar-toggler-icon "></span>
                    </button>
                    <!-- 导航列表 -->
                    <div class="navbar-collapse collapse justify-content-end nav-collapse-style" id="toggle">
                        <ul class="navbar-nav">
                            <li class="nav-item nav-list-style userindex">
                                <a href="#" class="nav-link ">主页</a>
                            </li>
                            <li class="nav-item nav-list-style">
                                <a href="#" class="nav-link allgame " id="introducebtn">所有游戏</a>
                            </li>
                            <li class="nav-item nav-list-style">
                                <a href="#" class="nav-link myinfo" data-bs-toggle="modal">我的主页</a>
                            </li>
                            <li class="nav-item nav-list-style">
                                <a href="#" class="nav-link aboutme">关于我们</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <div class="container game-area">
            <div class="game-content">
                <div class="game-head row">
                    <div class="game-category col-lg-4">
                        <span>按游戏类别筛选：</span>
                        <div class="d-inline-block">
                            <select name="game-category-select" id="category" class="form-select my-2 text-primary">
                                <option value="全部游戏">全部游戏</option>
                                <option value="休闲">休闲</option>
                                <option value="体育">体育</option>
                                <option value="冒险">冒险</option>
                                <option value="动作">动作</option>
                                <option value="竞速">竞速</option>
                                <option value="角色扮演">角色扮演</option>
                                <option value="策略">策略</option>
                                <option value="网游">网游</option>
                            </select>
                        </div>
                    </div>
                    <div class="game-search col-lg-4">
                        <span>按游戏名称搜索：</span>
                        <div class="search-area d-inline-block">
                            <input type="text" name="searchText" placeholder="输入游戏名称：" class="search-input form-control">
                            <i class="fa fa-search search-btn"></i>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="game-list">
                    <ul class="row gameList">
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer container-fluid">
        <div class="container footer-content">
            <span>版权所有@226幻游网责任有限公司</span>
        </div>
    </footer>


    <div class="modal fade" id="gameInfo" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-scrollable modal-fullscreen">
            <div class="modal-content">
                <div id="gameInfo-add">
                    <div class="modal-header game-top text-light ">
                        <h5 id="gameName">糖豆人：终极淘汰赛</h5>
                        <button  class="btn-close btn-close-white"  data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body container game">
                        <div class="gameInfo-content row ">
                            <div class="col-lg-6 col-12 gameInfo-picture">
                                <img src="../images/GameImage/game8.jpg" id="game-pc">
                            </div>
                            <div class="col-lg-6 gameInfo-text">
                                <div class="gameInfo-header">
                                    <h2 id="game-info-cname">鬼泣5</h2>
                                    <h5 id="game-info-ename">Devil May Cry V</h5>
                                </div>
                                <div class="gameInfo-content">
                                    <div>开发商：<span id="game-info-developer">卡普空</span></div>
                                    <div>发行日期：<span id="game-info-date">2019-09-06</span></div>
                                    <div class="game-profile-area">游戏介绍：
                                        <div class="game-profile">
                                            《鬼泣5》不但是系列的集大成者，而且在战斗、叙事、关卡节奏、重复游玩等方面均出现了长足进步。它是迄今为止最好的动作游戏之一，在《猎天使魔女3》问世之前，很难想象会有其他动作游戏能够与之相提并论 [11]  （《游民星空》评）
《鬼泣5》在玩法内核上依然延续了系列一直以来的设计，当初或许有观点认为它缺少变化，但现在看来，一，它做了变化；二，它没做变化的，表现得更好。当CAPCOM把这传统的ACT玩法用最新技术去呈现，玩家就会发现，硬核ACT的玩法经得起时间的考验，它在这个时代依然熠熠生辉 [10]  （《VGTime》评）
                                        </div>
                                    </div>
                                    <div class="game-score-area">
                                        <h5>媒体评分：</h5>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                        <div class="star"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">返回</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/scrollreveal.min.js"></script>
    <script src="../js/animate.js"></script>
    <script src="../js/page.js"></script>
    <script src="../js/game.js"></script>
</body>
</html>